<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人信息页面</title>
  <style>
    body {
      font-family: "Microsoft Yahei", sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #fff;
      color: #333;
    }

    .container {
      display: flex;
      gap: 20px;
    }

    .left-column {
      flex: 1;
    }

    .middle-column {
      flex: 1;
    }

    .right-column {
      flex: 1;
    }

    h2 {
      font-size: 18px;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    hr {
      border: none;
      border-top: 1px solid #ccc;
      margin: 15px 0;
    }

    ul {
      list-style-type: disc;
      padding-left: 20px;
    }

    li {
      margin-bottom: 5px;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 15px;
    }

    table,
    th,
    td {
      border: 1px solid #ccc;
    }

    th,
    td {
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    input[type="text"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
      width: 100%;
      padding: 6px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-sizing: border-box;
    }

    input[type="radio"],
    input[type="checkbox"] {
      margin-right: 5px;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .slider {
      width: 100%;
    }

    .progress-bar {
      height: 10px;
      background-color: #f3f3f3;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .progress-fill {
      height: 100%;
      background-color: #4CAF50;
      width: 70%;
    }

    .meter {
      height: 10px;
      background-color: #f3f3f3;
      border-radius: 5px;
      overflow: hidden;
    }

    .meter-fill {
      height: 100%;
      background-color: #008CBA;
      width: 90%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left-column">
      <h1>赵六</h1>
      <hr>
      <h2>联系方式</h2>
      <p>手机：123-0000-0000</p>
      <p>邮箱：zhaoliu@example.com</p>

      <h2>个人优势</h2>
      <ul>
        <li>快速学习</li>
        <li>团队协作</li>
        <li>代码规范</li>
      </ul>

      <h2>职业步骤</h2>
      <ol>
        <li>掌握HTML</li>
        <li>掌握CSS</li>
        <li>掌握JS</li>
      </ol>

      <h2>个人词条</h2>
      <p><strong>HTML</strong>：超文本标记语言</p>
      <p><strong>CSS</strong>：层叠样式表</p>

      <h2>技能树</h2>
      <ul>
        <li>前端
          <ul>
            <li>HTML</li>
            <li>CSS</li>
          </ul>
        </li>
        <li>后端
          <ul>
            <li>Node.js</li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="middle-column">
      <h2>教育经历</h2>
      <table>
        <tr>
          <th>时间</th>
          <th>学校</th>
          <th>专业</th>
        </tr>
        <tr>
          <td>2016-2020</td>
          <td>北京大学</td>
          <td>计算机</td>
        </tr>
        <tr>
          <td>2020-2023</td>
          <td>清华大学</td>
          <td>软件工程</td>
        </tr>
      </table>

      <h2>在线编辑</h2>
       <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" id="name" placeholder="your name">
      </div> 
      <div class="form-group">
        <label for="age">年龄：</label>
        <input type="number" id="age">
      </div> 
      <div class="form-group">
        <label for="email">邮箱：</label>
        <input type="text" id="email">
      </div>
      <div class="form-group">
        <label for="phone">电话：</label>
        <input type="text" id="phone">
      </div>
      <div class="form-group">
        <label for="homepage">主页：</label>
        <input type="text" id="homepage">
      </div>
      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password">
      </div>
      <div class="form-group">
        <label for="date">日期：</label>
        <input type="date" id="date">
      </div>
      <div class="form-group">
        <label for="time">时间：</label>
        <input type="time" id="time">
      </div>
      <div class="form-group">
        <label for="month">月份：</label>
        <input type="month" id="month">
      </div>
      <div class="form-group">
        <label for="week">周：</label>
        <input type="week" id="week">
      </div>
      <div class="form-group">
        <label for="datetime-local">本地日期时间：</label>
        <input type="datetime-local" id="datetime-local">
      </div>
      <div class="form-group">
        <label for="file">文件：</label>
        <input type="file" id="file">
      </div>
      <div class="form-group">
        <label for="color">颜色：</label>
        <input type="color" id="color">
      </div>
      <div class="form-group">
        <label for="range">范围0-100：</label>
        <input type="range" id="range" min="0" max="100" value="50" class="slider">
      </div>
    </div>

    <div class="right-column">
      <h2>选择</h2>
      <div class="form-group">
        <label>性别：</label>
        <input type="radio" name="gender" id="male"> 
        <label for="male">男</label>
        <input type="radio" name="gender" id="female">
        <label for="female">女</label>
      </div>
      <div class="form-group">
        <label>技能：</label>
        <input type="checkbox" id="html">
        <label for="html">HTML</label>
        <input type="checkbox" id="css">
        <label for="css">CSS</label>
        <input type="checkbox" id="js">
        <label for="js">JS</label>
      </div>

      <h2>下拉选择</h2>
      <div class="form-group">
        <label for="city">单选城市：</label>
        <select id="city">
          <option value="beijing"   >北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
        </select>
      </div>
      <div class="form-group">
        <label for="cities">多选城市：</label>
        <select id="cities" multiple size="3">
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
        </select>
      </div>

      <h2>自我介绍</h2>
      <textarea rows="4" cols="20" placeholder="说点什么..."></textarea>

      <h2>操作</h2>
      <input type="submit" value="提交">
      <input type="reset" value="重置">
      <button>普通按钮</button>
      <div class="form-group">
        <label for="hiddenField">隐藏域：</label>
        <input type="hidden" id="hiddenField" value="hiddenValue">
      </div>
      <div class="form-group">
        <label for="readonly">只读：</label>
        <input type="text" id="readonly" value="不能改" readonly>
      </div>
      <div class="form-group">
        <label for="disabled">禁用：</label>
        <input type="text" id="disabled" value="灰色" disabled>
      </div>

      <h2>自动补全</h2>
      <div class="form-group">
        <label for="language">语言：</label>
        <input type="text" id="language" list="languages">
        <datalist id="languages">
          <option value="HTML">
          <option value="CSS">
          <option value="JavaScript">
          <option value="Python">
          <option value="Java">
        </datalist> 
      </div>

      <h2>进度/度量</h2>
      <div class="form-group">
        <label for="loading">加载：</label>
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
      </div>
      <div class="form-group">
        <label for="score">分数：</label>
        <div class="meter">
          <div class="meter-fill"></div>
        </div>
      </div>

      <h2>项目细节</h2>
    </div>
  </div>
</body>

</html>